<script setup>
import { ref } from 'vue';
import { uniFetch } from '../../api/uni-fetch';
import OrderIteam from './components/OrderIteam.vue';
import { onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
import { useRegister } from '/hooks/login.js';
import { useUserStore } from '/store/user.js';
import { onShow, onLoad } from '@dcloudio/uni-app';

const store = useUserStore();
const totalCount = ref([0, 0, 0]);
const page = ref([1, 1, 1]);
const pay_status = ref([null, 0, 1]);
onLoad(() => {
	if (props.index) {
		tabIndex.value = props.index;
		console.log('onlaod');
	}
});
onShow(() => {
	console.log(store.token, 'store.token');
	if (!store.token) {
		uni.showToast({ title: '您未登录', icon: 'none' });
		return;
	}

	if (props.index) {
		onTabChange(props.index);
	} else {
		onTabChange(0);
	}
});

// 标签页索引
const tabIndex = ref(null);

const props = defineProps({
	index: String
});

console.log(props.index, 'tab-index');

// 切换 Tab 标签页
const tabMetas = ref([
	{
		title: '全部订单',
		rendered: true
	},
	{
		title: '待付款',
		rendered: false
	},
	{
		title: '已付款',
		rendered: false
	}
	// ,
	// {
	// 	title: '退款/售后',
	// 	rendered: false
	// }
]);

const list = ref([{ list: [] }, { list: [] }, { list: [] }]);
const onTabChange = (index = 0) => {
	console.log();
	tabMetas.value[index].rendered = true;
	tabIndex.value = index;
	if (!list.value[index].list.length) {
		getList(index);
	}
};

onPullDownRefresh(async () => {
	console.log('shuaxi');
	page.value[tabIndex.value] = 1;
	list.value[tabIndex.value].list = [];
	await getList(tabIndex.value);
	uni.stopPullDownRefresh();
});

// 获取订单列表
async function getList(index = 0) {
	const res = await uniFetch.post('/shop-order/list', {
		app_id: uni.appId,
		page: page.value[index],
		pageSize: 4,
		pay_status: pay_status.value[index]
	});
	console.log(res, 'orderList==>全部');
	totalCount.value[index] = res.data.total;
	if (index == 1) {
		console.log('index == 1');
		res.data.list.forEach((item) => {
			if (item.pay_status == 0 && item.status !== 99) {
				console.log(2233);
				list.value[index].list.push(item);
			}
		});
		console.log(list.value[index].list, index);
		return;
	}
	list.value[index].list.push(...res.data.list);
	console.log(list.value[index].list, 'list.value[index].list');
}

onReachBottom(() => {
	if (totalCount.value[tabIndex.value] > list.value[tabIndex.value].list.length) {
		page.value[tabIndex.value]++;
		getList(tabIndex.value);
	}
});

function goLogin() {
	store.curretPage = `pages/orders/orders`;
	wx.getPrivacySetting({
		success: (res) => {
			console.log(res);
			if (res.needAuthorization) {
				// 需要弹出隐私协议
				console.log(res, '隐私');
			} else {
				// 用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用隐私接口
				console.log('隐私条款suc');
			}
		},
		fail: (err) => {
			console.log(err.msg, '隐私协议接口出错');
		}
	});
	useRegister();
}
</script>

<template>
	<view class="page-container">
		<view class="task-tabbar">
			<text v-for="(tabMeta, index) in tabMetas" :key="tabMeta.title" @click="onTabChange(index)" :class="{ active: tabIndex == index }" class="tab">
				{{ tabMeta.title }}
			</text>
		</view>
		<view v-if="tabMetas[0].rendered" v-show="tabIndex == 0" class="task-list">
			<OrderIteam :orderList="list[0].list"></OrderIteam>
		</view>
		<view v-if="tabMetas[1].rendered" v-show="tabIndex == 1" class="task-list">
			<OrderIteam :orderList="list[1].list"></OrderIteam>
		</view>
		<view v-if="tabMetas[2].rendered" v-show="tabIndex == 2" class="task-list">
			<OrderIteam :orderList="list[2].list"></OrderIteam>
		</view>
		<!-- <view v-if="tabMetas[3].rendered" v-show="tabIndex == 3" class="task-list">
			<OrderIteam :orderList="shoulist"></OrderIteam>
		</view>
		<view v-if="tabMetas[4].rendered" v-show="tabIndex == 4" class="task-list">
			<OrderIteam :orderList="wancheng"></OrderIteam>
		</view> -->
		<view class="goLogin" @click="goLogin" v-if="!store.token">登录/注册</view>
		<ws-wx-privacy id="privacy-popup"></ws-wx-privacy>
	</view>
</template>

<style lang="scss" scoped>
.page-container {
	display: flex;
	flex-direction: column;
	background-color: #f3f3f3;
	min-height: 100vh;

	.goLogin {
		margin: 400rpx auto;
		width: 50%;
		line-height: 72rpx;
		height: 72rpx;
		font-size: 28rpx;
		text-align: center;
		color: #fff;
		border-radius: 50rpx;
		background: generate-gradient($custom-theme-color, $custom-theme-color-l);
	}
}

.task-tabbar {
	height: 95rpx;
	position: fixed;
	z-index: 3;
	width: 100%;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-around;
	font-size: 29rpx;
	background-color: #fef9fe;
	border-bottom: 1rpx solid #eee;
	color: #010101;

	.tab {
		height: 100%;
		line-height: 95rpx;
	}

	.active {
		color: $custom-theme-color-l;
		font-weight: 500;
		position: relative;

		&::after {
			content: '';
			position: absolute;
			left: 50%;
			bottom: 0rpx;
			width: 56rpx;
			height: 8rpx;
			border-radius: 8rpx;
			transform: translate(-50%);
			background-color: $custom-theme-color;
		}
	}
}

.task-list {
	flex: 1;
	overflow: hidden;
	margin-top: 100rpx;

	.task-card {
		padding: 24rpx 30rpx 0;
		background-color: #fff;
		border-radius: 16rpx;
		margin: 15rpx 30rpx 30rpx;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.no {
		font-size: 26rpx;
		color: red;
		font-weight: 500;
	}

	.status {
		padding: 5rpx 20rpx 3rpx;
		font-size: 24rpx;
		color: green;
		border: 2rpx solid green;
		border-radius: 60rpx;
	}

	.body {
		padding: 40rpx 0;
		border-bottom: 1rpx solid #f4f4f4;
	}

	.timeline {
		border-left: 2rpx dashed #f4f4f4;
		margin-left: 30rpx;
		padding: 0 30rpx;
		position: relative;

		&::before,
		&::after {
			position: absolute;
			left: -24rpx;
			width: 44rpx;
			height: 44rpx;
			text-align: center;
			line-height: 44rpx;
			font-size: 24rpx;
			color: #fff;
			border-radius: 50%;
			background-color: pink;
		}

		&::before {
			content: '起';
			top: -1rpx;
			background-color: green;
		}

		&::after {
			content: '止';
			bottom: -1rpx;
			background-color: green;
		}
	}

	.line {
		font-size: 25rpx;
		color: green;
		margin-top: 30rpx;

		&:first-child {
			margin-top: 0;
		}
	}

	.footer {
		padding: 20rpx 0;
		position: relative;

		&.flex {
			display: flex;
		}
	}

	.label,
	.time {
		font-size: 25rpx;
		margin-right: 15rpx;
		color: green;
	}

	.action {
		position: absolute;
		right: 0;
		top: 50%;
		display: flex;
		align-items: center;
		height: 64rpx;
		padding: 0 40rpx;
		background-color: green;
		color: #fff;
		font-size: 25rpx;
		border-radius: 64rpx;
		transform: translate(0, -50%);

		&[disabled],
		&.disabled {
			background-color: #fadcd9;
		}
	}
}

.task-search {
	padding: 30rpx;
	// margin-top: -1rpx;
	background-color: #fff;
	border-bottom: 1rpx solid #eee;

	.search-bar {
		position: relative;

		.icon-search {
			position: absolute;
			top: 22rpx;
			left: 24rpx;
			color: green;
			font-size: 25rpx;
		}

		.input {
			height: 72rpx;
			background-color: #f4f4f4;
			border-radius: 72rpx;
			padding-left: 72rpx;
			font-size: 25rpx;
		}
	}

	.filter-bar {
		display: flex;
		margin-top: 30rpx;
		font-size: 25rpx;
		text-align: center;
		line-height: 64rpx;
		color: green;

		.picker {
			width: 230rpx;
			height: 64rpx;
			border-radius: 64rpx;
			background-color: green;
		}

		.text {
			margin: 0 24rpx;
		}

		.button {
			width: 120rpx;
			height: 64rpx;
			padding: 0;
			margin-left: 40rpx;
			line-height: 64rpx;
			border-radius: 64rpx;
			font-size: 25rpx;
			color: #fff;
			background-color: green;

			&[disabled] {
				background-color: #fadcd9;
			}
		}
	}
}

.task-blank {
	position: absolute;
	left: 50%;
	top: 40%;
	width: 201rpx;
	text-align: center;
	padding-top: 130rpx;
	background-image: url(https://sl-driver.oss-cn-hangzhou.aliyuncs.com/images/blank%402x.png);
	background-size: contain;
	background-repeat: no-repeat;
	font-size: 24rpx;
	color: green;
	transform: translate(-50%, -100%);
}
</style>
